<template>
  <div class="promotional-banner">
    <div class="banner-header">
      <h4>促销横幅模板</h4>
    </div>

    <div class="banner-filter">
      <div class="filter-row">
        <span class="filter-label">促销类型：</span>
        <el-select v-model="selectedType" placeholder="选择类型" size="small">
          <el-option v-for="type in promotionTypes" :key="type.value" :label="type.label" :value="type.value" />
        </el-select>
      </div>
      <div class="filter-row">
        <span class="filter-label">尺寸：</span>
        <el-select v-model="selectedSize" placeholder="选择尺寸" size="small">
          <el-option v-for="size in sizes" :key="size.value" :label="size.label" :value="size.value" />
        </el-select>
      </div>
    </div>

    <div class="banners-grid">
      <div 
        v-for="banner in filteredBanners" 
        :key="banner.id" 
        class="banner-item"
        @click="selectBanner(banner)"
      >
        <div class="banner-preview">
          <img :src="banner.preview" :alt="banner.name" />
        </div>
        <div class="banner-info">
          <div class="banner-name">{{ banner.name }}</div>
          <div class="banner-size">{{ banner.dimensions }}</div>
        </div>
      </div>
    </div>

    <div v-if="selectedBanner" class="banner-detail-overlay">
      <div class="banner-detail">
        <div class="detail-header">
          <h5>{{ selectedBanner.name }}</h5>
          <el-button icon="el-icon-close" circle size="mini" @click="closeDetail"></el-button>
        </div>
        <div class="detail-preview">
          <img :src="selectedBanner.preview" :alt="selectedBanner.name" />
        </div>
        <div class="detail-info">
          <div class="info-item">
            <span class="info-label">尺寸：</span>
            <span class="info-value">{{ selectedBanner.dimensions }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">类型：</span>
            <span class="info-value">{{ getTypeName(selectedBanner.type) }}</span>
          </div>
        </div>
        <div class="detail-actions">
          <el-button type="primary" size="small" @click="useBanner">使用模板</el-button>
          <el-button size="small" @click="customizeBanner">自定义</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const emit = defineEmits(['apply-template']);

// 促销类型
const selectedType = ref('all');
const promotionTypes = [
  { label: '全部', value: 'all' },
  { label: '秒杀', value: 'flash' },
  { label: '满减', value: 'discount' },
  { label: '新品', value: 'new' },
  { label: '节日', value: 'holiday' }
];

// 尺寸
const selectedSize = ref('all');
const sizes = [
  { label: '全部', value: 'all' },
  { label: '店铺首页', value: 'home' },
  { label: '商品详情', value: 'detail' },
  { label: '移动端', value: 'mobile' }
];

// 横幅数据
const banners = [
  { 
    id: 'pb1', 
    name: '618狂欢节', 
    preview: '/images/commerce/banners/banner1.jpg', 
    dimensions: '920x350', 
    type: 'flash',
    size: 'home'
  },
  { 
    id: 'pb2', 
    name: '限时满减', 
    preview: '/images/commerce/banners/banner2.jpg', 
    dimensions: '920x280', 
    type: 'discount',
    size: 'home'
  },
  { 
    id: 'pb3', 
    name: '新品首发', 
    preview: '/images/commerce/banners/banner3.jpg', 
    dimensions: '750x250', 
    type: 'new',
    size: 'detail'
  },
  { 
    id: 'pb4', 
    name: '元旦特惠', 
    preview: '/images/commerce/banners/banner4.jpg', 
    dimensions: '750x250', 
    type: 'holiday',
    size: 'detail'
  },
  { 
    id: 'pb5', 
    name: '手机端秒杀', 
    preview: '/images/commerce/banners/banner5.jpg', 
    dimensions: '375x180', 
    type: 'flash',
    size: 'mobile'
  },
  { 
    id: 'pb6', 
    name: '手机端折扣', 
    preview: '/images/commerce/banners/banner6.jpg', 
    dimensions: '375x180', 
    type: 'discount',
    size: 'mobile'
  }
];

// 根据筛选条件过滤横幅
const filteredBanners = computed(() => {
  return banners.filter(banner => {
    const typeMatch = selectedType.value === 'all' || banner.type === selectedType.value;
    const sizeMatch = selectedSize.value === 'all' || banner.size === selectedSize.value;
    return typeMatch && sizeMatch;
  });
});

// 获取类型名称
function getTypeName(typeValue) {
  const type = promotionTypes.find(t => t.value === typeValue);
  return type ? type.label : typeValue;
}

// 横幅选择与操作
const selectedBanner = ref(null);

function selectBanner(banner) {
  selectedBanner.value = banner;
}

function closeDetail() {
  selectedBanner.value = null;
}

function useBanner() {
  if (selectedBanner.value) {
    emit('apply-template', selectedBanner.value);
    selectedBanner.value = null;
  }
}

function customizeBanner() {
  if (selectedBanner.value) {
    emit('apply-template', { ...selectedBanner.value, customize: true });
    selectedBanner.value = null;
  }
}
</script>

<style scoped>
.promotional-banner {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;
  position: relative;
}

.banner-header {
  margin-bottom: 15px;
}

.banner-header h4 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.banner-filter {
  margin-bottom: 20px;
}

.filter-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.filter-label {
  font-size: 13px;
  color: #606266;
  width: 70px;
}

.banners-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  overflow-y: auto;
  flex: 1;
}

.banner-item {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
  background-color: #fff;
}

.banner-item:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  border-color: #c6e2ff;
}

.banner-preview {
  width: 100%;
  height: 100px;
  background-color: #f5f7fa;
}

.banner-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-info {
  padding: 8px;
}

.banner-name {
  font-size: 13px;
  color: #303133;
  margin-bottom: 4px;
}

.banner-size {
  font-size: 12px;
  color: #909399;
}

.banner-detail-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.banner-detail {
  width: 90%;
  max-width: 500px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  border-bottom: 1px solid #ebeef5;
}

.detail-header h5 {
  margin: 0;
  font-size: 16px;
  color: #303133;
}

.detail-preview {
  padding: 15px;
  background-color: #f5f7fa;
  text-align: center;
}

.detail-preview img {
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
}

.detail-info {
  padding: 15px;
  border-top: 1px solid #ebeef5;
}

.info-item {
  display: flex;
  margin-bottom: 8px;
}

.info-label {
  color: #606266;
  font-size: 13px;
  width: 60px;
}

.info-value {
  color: #303133;
  font-size: 13px;
}

.detail-actions {
  padding: 12px 15px;
  display: flex;
  justify-content: center;
  gap: 10px;
  border-top: 1px solid #ebeef5;
}
</style>